<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-01 19:09:22
-->
<template>
    <table class="myTable trans">
        <thead v-if="props.showTHead">
            <tr>
                <th v-if="props.showDefaultColumn" class="index"></th>
                <th v-if="props.showDefaultColumn" class="edit">操作</th>
                <th
                    v-for="(item, index) in props.columns"
                    :key="index"
                    :style="getStyle(item)"
                >{{ item.label }}</th>
            </tr>
        </thead>
        <Loading :show="showLoading" />
        <transition appear name="table">
            <tbody>
                <tr
                    v-for="(row, index) in props.tableData"
                    :key="row.id"
                    :class="{ 'zebra': index % 2 }"
                >
                    <td v-if="props.showDefaultColumn" class="index flex-c-c">
                        <div v-if="row.id !== playStore.songId">
                            {{ index < 9 ? '0' + (index + 1) : index + 1 }}
                        </div>
                        <SvgIcon v-else name="playing-vioice-icon" size="22" class="text-theme-color" />
                    </td>
                    <td v-if="props.showDefaultColumn" class="edit flex-c">
                        <svgIcon
                            name="love"
                            size="20"
                            hover
                        ></svgIcon>
                        <svgIcon name="download" size="16" hover class="ml-1"></svgIcon>
                    </td>
                    <td
                        v-for="col in props.columns"
                        :key="col.label"
                        :class="[col.class]"
                        :style="getStyle(col)"
                        @click="handleCallBack(row, col, 'click')"
                        @dblclick="handleCallBack(row, col, 'dbClick')"
                    >
                        <slot :name="col.prop" :scope="row">{{ row[col.prop] }}</slot>
                    </td>
                </tr>
            </tbody>
        </transition>
    </table>
</template>

<script lang='ts' setup>import { IAllObject } from '@/types/base';
import { event, IColumn, IStyle, TStyleMap } from './types';
import Loading from '../loading/loading.vue';
import { computed } from 'vue';
import SvgIcon from '../svgIcon/svgIcon.vue';
import { usePlayStore } from '@/store/play'

const props = withDefaults(defineProps<
    {
        columns: IColumn[], //列
        tableData: any[],    //表格数据
        showTHead?: boolean, //是否展示表头
        showDefaultColumn?: boolean,  //是否展示默认的几列数据(索引和操作)
    }>(), {
        showTHead: true,
        showDefaultColumn: true
    })
const playStore = usePlayStore()
// 是否显示loading
const showLoading = computed(() => {
    if(props.tableData && props.tableData.length > 0) return false
    return true
})
// 样式缓存
const styleMap: TStyleMap = new Map()

// 计算样式
const getStyle = (col: IColumn) => {
    if (styleMap.has(col.prop)) return styleMap.get(col.prop)
    const style: IStyle = {}
    if (col.width) {
        let width = `${col.width}`
        style.width = `${width.replace('px', '')}px`
    }
    if (col.flex) style.flex = col.flex
    styleMap.set(col.prop, style)
    return style
}

// 处理事件回调
const handleCallBack = (row: IAllObject, col: IColumn, event: event) => {
    // @ts-ignore
    typeof col[event] === 'function' && col[event](row)
}
</script>

<style scoped lang='scss'>
.myTable {
    @apply w-full bg-main-bg-color border-t border-main-border-color;
    tr {
        @apply w-full flex h-8 leading-8 text-13 text-sub-text-color transition-all duration-300 hover:bg-main-border-color;
    }
    th {
        @apply h-8 leading-8 font-normal whitespace-nowrap overflow-hidden overflow-ellipsis;
        color: $sub-text-color !important;
        font-size: 12px !important;
    }
    td {
        @apply whitespace-nowrap overflow-hidden overflow-ellipsis w-24;
        height: inherit;
    }
    .index {
        @apply text-sub-text-color text-11 text-center;
        flex: 1;
        max-width: 80px;
    }
    .edit {
        @apply text-sub-text-color text-11;
        flex: 1;
        max-width: 80px;
    }
    // 斑马纹
    .zebra {
        background-color: rgba($color: #666, $alpha: 0.05);
    }
}
</style>